<template>
    <el-dialog
      id="displgid"
      :visible.sync="modalVisible"
      v-if="modalVisible"
      :title="title"
      centered
      @close="$emit('closepopup2')"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal = "false"
    >
      <slot />
    </el-dialog>
  </template>
  
  <script>
  import ScaleBox from "vue2-scale-box"; 
  export default {
    components: {
      ScaleBox,
    },
    props: {
      // modal是否可见
      modalVisible: {
        type: Boolean,
        default: false,
      },
      title: String,
    },
    data() {
      return {
        scalevalue: this.$store.state.scalevalue,
        cssLoaded: false,
        scaleVal: false,
      };
    },
    created() {  
      let zhi  = ((1 / window.devicePixelRatio) * 0.9 + 0.3 ).toFixed(2)
      // document.documentElement.style.setProperty("--main-bg", zhi);
      // if (window.devicePixelRatio >= 1.5) {
        
      // } else if (window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5) {
      //   document.documentElement.style.setProperty("--main-bg", zhi);
      // }
  
      if (window.devicePixelRatio) {
        this.scaleVal = true;
      }
      setTimeout(() => {
        this.$nextTick(() => {
          if (window.devicePixelRatio != 1) {
            // document.getElementById("displgid").style.zoom = (
            //   (1 / window.devicePixelRatio) * 0.9 +
            //   0.3
            // ).toFixed(2); 
            // this.$store.state.scalevalue = (
            //   (1 / window.devicePixelRatio) * 0.9 +
            //   0.3
            // ).toFixed(2);
            this.scalevalue = ((1 / window.devicePixelRatio) * 0.9 + 0.3).toFixed(
              2
            );
            document.body.style.fontSize = "20px";
          }
        }); 
        // console.log(document.getElementById("displgid").clientWidth, 1111);
        // console.log(document.getElementById("displgid").clientHeight, 1111);
      }, 1000);
    },
    watch: {
      //侦听store里某个属性的变化
      "$store.state.scalevalue": function (val) { 
        this.scalevalue = val;
      },
    },
    methods: {
      onConfirm() {
        this.$emit("bulkImport");
      },
      handleClose() { 
        this.$parent.closepopup2();
        // this.$emit("closepopup");
      },
    },
  };
  </script>
  
  <style scoped>
  .el-dialog__wrapper {
    backdrop-filter: blur(0.2rem);
    height: 100%;
  }
  ::v-deep .el-dialog__headerbtn{
    right: 0;
  }
  /deep/ .el-dialog__header{
    width: 100%;
   position: absolute;
   top:0%;
   right:3%; 
   z-index: 9999;
  }
  
  
  /deep/ .el-dialog {
    width:38%;
    height:80%;
    margin: 0 auto;
    margin-top: 6% !important;
    display: flex;
    flex-direction: column;
    /* background-image: url("~@/assets/kspcmiddledislogbg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%; */
    background-color: #dee3ea;
    border-radius: 0.5rem;
    /* background-color: rgb(0, 38, 141, 0) !important; */
    border: none;
    box-shadow: none;
    padding: 0.9% 1.2%;
    box-sizing: border-box;
    overflow: hidden;
    font-family: JCYT; 
    position: relative;
  }
  /deep/ .el-dialog__footer {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  /deep/ .el-dialog__title {
    display: none;
    font-size: 1rem;
    color: #182c56;
    border-bottom: 0.05rem solid #182c56;
  }
  /deep/ .el-dialog__body {
    height: 98%;
    /* overflow: hidden; */
    flex: 1;
    padding: 0px;
    color: #192c55;
    position: absolute;
    top: 0;
    /* left: 1%;  */
    width: 95%; 
  }
  /deep/ .el-dialog__close {
    width: 1.5rem;
    height: 1.5rem;
    background: url("~@/assets/closepopupshow.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  ::v-deep .el-dialog__headerbtn{
    top: 0.8rem;
  }
  /deep/ .el-dialog__close:before {
    content: "替";
    visibility: hidden;
  }
  </style>
  <style lang="scss">
  /* @import url("@/assets/css/scalebig.css"); */
  
  /* 在这里定义的css变量，叫做全局css变量。在任何选择器中，都可以去使用。 */
  :root {
    /* css变量中的值，可以是“任何值” */
    --main-bg: 1;
  }
  
  .app-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    zoom: var(--main-bg);
  }
  .el-select-dropdown {
    zoom: var(--main-bg);
  }
  .el-picker-panel {
    zoom: var(--main-bg);
  }
  .elp-table {
    zoom: var(--main-bg);
  }
  </style>